<template>
    <div class="item" @click="handleClick">
        <div class="item_inner">
            <div class="info">
                <p class="title">{{detail.title}}</p>
                <!-- 我的素材 -->
                <div v-if="type == 'myMaterial'" class="flex-v-center flex-between mar-t20 color-999">
                    <span class="flex-v-center fs26">
                        <i class="icon-clock mar-r10"></i>
                        {{item.createTime}}
                    </span>
                    <span class="flex-v-center fs26" @click.stop="deleteMyMaterical">
                        <i class="icon-delete color-ccc mar-r10"></i>
                        删除
                    </span>
                </div>
                <!-- 团队分享 -->
                <div v-else-if="type == 'team'" class="flex-v-center flex-between mar-t20 color-999">
                    <div class="flex-v-center" @click.stop="clickAvator">
                        <image class="w40 h40" style="border-radius: 50%" :src="item.headImg" mode="" />
                        <span class="mar-l10"> {{item.userName}} </span>
                    </div>
                    <span class="flex-v-center fs26">
                        <i class="icon-fenxiang color-ccc mar-r10"></i>
                        分享了{{item.cnt}}次
                    </span>
                </div>
                <!-- 我分享的 -->
                <div v-else-if="type == 'myShare'" class="flex-v-center flex-between mar-t20 color-999">
                    <span class="flex-v-center fs26">
                        <i class="icon-fenxiang color-ccc mar-r10"></i>
                        分享了{{item.shareCnt}}次
                    </span>
                    <span class="flex-v-center fs26" @click.stop="removeRecord('3,4')">
                        <i class="icon-delete3 color-ccc mar-r10"></i>
                        移除
                    </span>
                </div>
                <!-- 已赞的 -->
                <div v-else-if="type == 'myLike'" class="flex-v-center flex-between mar-t20 color-999">
                    <span class="flex-v-center fs26">
                        <i class="icon-icon_bumen color-ccc mar-r10"></i>
                        {{item.praiseCnt}}人已点赞
                    </span>
                </div>
                <!-- 我看过的 -->
                <div v-else-if="type == 'mySee'" class="flex-v-center flex-between mar-t20 color-999">
                    <span class="flex-v-center fs26">
                        <i class="icon-clock mar-r10"></i>
                        {{item.createTime}}
                    </span>
                    <span class="flex-v-center fs26" @click.stop="removeRecord('1')">
                        <i class="icon-delete3 color-ccc mar-r10"></i>
                        移除
                    </span>
                </div>
                <!-- 别人看我的 -->
                <div v-else-if="type == 'whoSeeMe'" class="flex-v-center flex-between mar-t20 color-999">
                    <span class="flex-v-center fs26">
                        查看次数：{{item.userShareViewCnt}}
                    </span>
                    <span class="flex-v-center fs26">
                        查看人数：{{item.viewShareNum}}
                    </span>
                </div>
                <!-- 草稿 -->
                <div v-else-if="type == 'draft'" class="flex-v-center flex-between mar-t20 color-999">
                    <span class="flex-v-center fs26">
                        10-20 14:23:47
                    </span>
                </div>
                <!-- 素材 -->
                <div v-else class="flex-v-center flex-between mar-t20 color-999">
                    <span> {{detail.industryNames}} </span>
                    <span class="flex-v-center">
                        <i class="icon-fenxiang color-ccc mar-r10"></i>
                        阅读 {{detail.viewCnt}} 次
                    </span>
                </div>
            </div>
            <div class="img">
                <image :src="detail.pictureUrl || detail.picUrl" mode="aspectFill"></image>
                <div v-if="detail.dynamicType == '01'" class="video_mask"><i class="icon-play"></i></div>
            </div>
        </div>
        <div v-if="type == 'myShare'" class="saw fs28 pad-tb10 flex-v-center" @click.stop="$navigate.to('/pages/user/whoSeeMe')">
            <i class="icon-view fs34 mar-r10"></i>
            <span>被查看</span>
            <em class="color-red">{{detail.userShareViewCnt || 0}}</em>
            <span>次</span>
            <i class="icon-arrow-right fs20 mar-l10"></i>
        </div>
    </div>
</template>

<script>
import { removeViewerDynamicHis } from '@/request/user'
import { delDynamic } from '@/request/art'
export default {
    data(){
        return {

        }
    },
    props: {
        item: {
            type: Object,
            default: () => ({})
        },
        type: {
            type: String,
            default: ''
        }
    },
    computed: {
        detail() {
            this.$force
            let detail = this.item
            try {
                detail.industryNames = JSON.parse(detail.industryNames) || []
                detail.industryNames = detail.industryNames.map(i => i.industryId).join('，')
                if(detail.industryNames) detail.industryNames = '#' + detail.industryNames
            } catch(e) {
                detail.industryNames = ''
            }
            return detail
        }
    },
    methods: {
        handleClick(){
            this.$emit('click')
        },
        deleteMyMaterical() {
            this.$interact.modal({
                title: '提示',
                content: '是否删除素材？',
                showCancel: true
            }).then(action => {
                if(action.confirm) {
                    delDynamic({
                        dynamicId: this.detail.id
                    }).then(res => {
                        this.$interact.toast(res.msg)
                        this.$emit('refresh')
                    })
                }
            })
        },
        removeRecord(type) {
            this.$interact.modal({
                title: '提示',
                content: '是否移除？',
                showCancel: true
            }).then(action => {
                if(action.confirm) {
                    removeViewerDynamicHis({
                        dynamicId: this.detail.id,
                        viewTypeStr: type
                    }).then(res => {
                        this.$interact.toast(res.msg)
                        this.$emit('refresh')
                    })
                }
            })

        },
        clickAvator() {
            this.$emit('avator', this.item)
        }
    }

}
</script>

<style lang="less" scoped>
    .item{
        border-bottom: 1px solid #ddd;
        padding: 20rpx 0;
        &:last-child{
            border-bottom: 0;
        }
        .item_inner{
            display: flex;
            .info{
                flex: 1;
                width: 1px;
                margin-right: 15rpx;
                .title{
                    height: 96rpx;
                    font-size: 34rpx;
                    font-weight: bold;
                    line-height: 48rpx;
                    .overflow(2);
                }
                >div{
                    width: 100%;
                    span{
                        &:first-child{
                            width: 1px;
                            flex: 1;
                            .overflow();
                        }
                        flex-shrink: 0;
                    }
                }
            }
            .img{
                flex-shrink: 0;
                width: 200rpx;
                height: 160rpx;
                border-radius: 10rpx;
                overflow: hidden;
                position: relative;
                background: #f2f2f2;
                image{
                    width: 100%;
                    height: 100%;
                }
                .video_mask{
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    background: rgba(0, 0, 0, 0.5);
                    .align(center);
                    i{
                        font-size: 50rpx;
                        color: #fff;
                    }
                }
            }
        }
    }   
    .saw{
        color: #576b95;
    }
</style>